<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>
            skel test
        </title>
        <link href="index.css" rel="stylesheet"/>
        <script src="../script/jquery.min.js">
        </script>
        <script src="vendor/skel-all.js">
        </script>
        <!-- <script src="vendor/skel.min.js"></script>
	<script src="vendor/skel-layout.min.js"></script> -->
        <script type="text/javascript">
            $(function(){
				console.log('document ready...');
			});
		/*
		skel.breakpoints({
		    xlarge: "(min-width: 1280px)", 
		    large:  "(max-width: 1280px)",
		    medium: "(max-width: 980px)",
		    small:  "(max-width: 736px)",
		    xsmall: "(max-width: 480px)"
		});
		*/
		skel.breakpoints({
		    wide: "(min-width: 1280px)", 
		    narrow:  "(max-width: 1280px) and (min-width: 736px)",
		    mobile: "(max-width: 736px)"
		});
		// test
		console.log(skel);
		console.log(skel.breakpoint("narrow"));
		skel.on("load",function(){
			console.log("skel loaded!")
		});
		skel.on("ready",function(){
			console.log("skel ready!")
		});
		skel.on("init",function(){
			console.log("skel initialized!")
		});
		skel.on("change",function(){
			console.log("skel changed!",skel.stateId)
		});
		skel.on("+large",function(){
			console.log("large breakpoint active!")
		});
		skel.on("-medium",function(){
			console.log("medium breakpoint inactive!")
		});
		skel.on("!small",function(){
			console.log("no small breakpoint!")
		});
		/* 在1240px下刷新,即：init->change->ready->loaded->change */

		skel.layout({
		    reset: "normalize", /* normalize full(reset) */
		    grid: 1,  /* default 40px  column */
		    containers: true,  /* default 960px ,960|1020|...number */
		    conditionals: true, /*query only- not- */
		    breakpoints: {
		        wide: {
		            containers: "85%",
		            grid: { gutters: 0 }
		        },
		        narrow: {
		            containers: "90%",
		            grid: { gutters: [0,0] } 
		            /* [rowMarginLeft,rowMarginTop] [colPaddingLeft,colPaddingTop]*/
		        },
		        mobile: {
		        	containers: "100%",
		            grid: { gutters: [0,0] }
		        }
		    }
		});
        </script>
    </head>
    <body>
        <!-- header -->
        <div class="header">
            <div class="container">
                <div class="row">
                    <div class="logo 4u 12u$(mobile)">
                        <a href="#">
                            logo
                        </a>
                    </div>
                    <div class="nav 8u 12u$(mobile)">
                        <ul class="navbar">
                            <li>
                                home
                            </li>
                            <li>
                                about
                            </li>
                            <li>
                                category
                            </li>
                            <li>
                                tags
                            </li>
                            <li>
                                donate
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- slider -->
        <div class="slider">
            <div class="sliderbg slider01">
            </div>
            <div class="sliderbg slider02">
            </div>
            <div class="slider-btns">
            </div>
        </div>
        <!-- body content -->
        <div class="container content ">
            <div class="module">
                <h1>
                    module one
                </h1>
                <div class="content">
                    this is content.
                </div>
            </div>
            <div class="module">
                <h1>
                    module two
                </h1>
                <div class="content">
                    this is content..
                </div>
            </div>
            <div class="module only-wide">
                <br/>
                only-wide
                <br/>
                <br/>
            </div>
            <div class="module only-narrow">
                <br/>
                only-narrow
                <br/>
                <br/>
            </div>
            <div class="module only-mobile">
                <br/>
                only-mobile
                <br/>
                <br/>
            </div>
            <div class="row ">
                <div class="module 6u 12u(mobile)">
                    a row start
                </div>
                <div class="module 6u$ 12u(mobile)">
                    a row end
                </div>
            </div>
            <div class="row">
                <div class="module 2u 6u(mobile)">
                    b row start
                </div>
                <div class="module 4u 6u$(mobile)">
                    b row middle
                </div>
                <div class="module 6u$ 12u(mobile)">
                    b row end
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col 6u">
                        this is the footer.
                    </div>
                    <div class="col 6u">
                        this is the footer.
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>